<template>
  <div class="menu">
      <div class="menu-modular">
        <div class="menu-public menu-head"><span></span>风险概览</div>
        <router-link class="menu-public menu-option" v-for="(item,key) in menuOptions" :key="key" v-text="item" @click.native="menuOptionClick(key)" :class="{active:key==isActive}" :to="links[key]"></router-link>        
        <!-- <div class="menu-public menu-option" v-for="(item,key) in menuOptions" :key="key" v-text="item" @click="menuOptionClick(key)" :class="{active:key==isActive}" ></div>         -->
      </div>
  </div>
</template>

<script>
export default {
  name: 'menuBar',
  data () {
    return {
        menuOptions:['事件详情','规则详情'],
        isActive:2,
        links:['risk1','risk2']
    }
  },
  methods:{
      menuOptionClick(key){
          this.isActive = key
          console.log(this.isActive + ',' + key )
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .menu {
        width: 150px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        background: #04357d;
        position: fixed;
        padding-top:105px; 
    } 

    .menu .menu-modular {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        color: #5083D0;
        font-size: 16px;
    }

    .menu .menu-modular .menu-public {
        padding-left: 25px;
        border-bottom: 1px solid #104aa0;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .menu .menu-modular .menu-head {
        height: 55px;
        color: #fff;
        font-size: 18px;
    }

    .menu .menu-modular .menu-head span {
        width: 5px;
        height: 18px;
        background: #fff;
        margin-right: 10px;
    }

    .menu .menu-modular .menu-option {
        height: 50px;
        padding-left: 35px;
        color: #5083D0;
    }

    .menu .menu-modular .menu-option.active {
        border: none;
        background: #e6e9ed;
        color: #04357D;
    }

</style>
